<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#div1 {width:100px; height:100px;background-color:#09F; cursor:pointer; opacity:0.5; filter:alpha(opacity:50);}
</style>
<script type="text/javascript" src="perfectMove.js"></script>
<script type="text/javascript">
window.onload = function(){
	var oDiv = document.getElementById('div1');
	oDiv.isExpanded = false;
	oDiv.onclick = function(){
		oDiv.params = {
			iTimeSpan: 10	
		};
		if(!oDiv.isExpanded){
			oDiv.isExpanded = true;
			oDiv.attrs = {
				width: {
					speedType: 'elastic',
					iTargetValue: 200,
					iSpeed: 0,
					fFrictionFactor: 0.8
				}
			};
			startMove(oDiv, 30, function(){
				oDiv.attrs = {
					height: {
						speedType: 'acceleratedRebound',
						iTargetValue: 400,
						iSpeed: 0,
						iAcceleration: 3,
						fReboundFactor: 0.7
					}
				};
				startMove(oDiv, 30, function(){
					oDiv.attrs = {
						opacity: {
							speedType: 'uniform',
							iTargetValue: 100,
							iSpeed: 2
						}
					};
					startMove(oDiv, 30);
				});
			});
		}else{
			oDiv.isExpanded = false;
			oDiv.attrs = {
				opacity: {
					speedType: 'uniform',
					iTargetValue: 50,
					iSpeed: -2
				}
			};
			startMove(oDiv, 30, function(){
				oDiv.attrs = {
					height: {
						speedType: 'acceleratedRebound',
						iTargetValue: 100,
						iSpeed:0, 
						iAcceleration: -3,
						fReboundFactor: 0.7
					}
				};
				startMove(oDiv, 30, function(){
					oDiv.attrs = {
						width: {
							speedType: 'elastic',
							iTargetValue: 100,
							iSpeed: 0,
							fFrictionFactor: 0.8	
						}
					};
					startMove(oDiv, 30);
				});
			});
		}
	}
}
</script>
</head>
<div id="div1">
</div>
<body>
</body>
</html>
